<template>
	<view class="page-container">
		<view class="p-3 pb-1 page-wrap">
			<view class="flex justify-between align-start p-2 mb-3 serach-bar">
				<view class="query">
					<u-collapse :border="false">
						<u-collapse-item title="筛选" name="">
							<view class="query-form">
								<u--form class="order-form-block" labelWidth="80" labelPosition="left" :model="queryForm"
									ref="form1">
									<u-form-item label="开始时间" prop="Start" borderBottom
										@click="() => (showStartTime = true)">
										<u--input v-model="queryForm.Start" disabled disabledColor="#ffffff"
											placeholder="选择开始时间" border="none">
										</u--input>
										<u-icon slot="right" name="arrow-right"></u-icon>
									</u-form-item>
									<u-form-item label="结束时间" prop="End" borderBottom @click="() => (showEndTime = true)">
										<u--input v-model="queryForm.End" disabled disabledColor="#ffffff"
											placeholder="选择结束时间" border="none">
										</u--input>
										<u-icon slot="right" name="arrow-right"></u-icon>
									</u-form-item>
									<u-form-item label="客户" prop="CustName" borderBottom
										@click="() => (showCustomer = true)">
										<u--input v-model="queryForm.CustName" disabled disabledColor="#ffffff"
											placeholder="请选择客户" border="none">
										</u--input>
										<u-icon slot="right" name="arrow-right"></u-icon>
									</u-form-item>
									<u-form-item label="员工" prop="Saler" borderBottom @click="showSalesman = true">
										<u--input v-model="queryForm.Engineer" disabled disabledColor="#ffffff"
											placeholder="请选择员工" border="none">
										</u--input>
										<u-icon slot="right" name="arrow-right"></u-icon>
									</u-form-item>
									<u-form-item label="服务类型" prop="RepairType" borderBottom
										@click="() => (showRepairType = true)">
										<u--input v-model="queryForm.RepairType" disabled disabledColor="#ffffff"
											placeholder="请选择服务类型" border="none">
										</u--input>
										<u-icon slot="right" name="arrow-right"></u-icon>
									</u-form-item>
									<u-form-item label="服务分类" prop="RepairCatg" borderBottom
										@click="() => (showRepairCatg = true)">
										<u--input v-model="queryForm.RepairCatg" disabled disabledColor="#ffffff"
											placeholder="请选择服务分类" border="none">
										</u--input>
										<u-icon slot="right" name="arrow-right"></u-icon>
									</u-form-item>
									<u-form-item label="工单状态" prop="RepairType" borderBottom
										@click="() => (showOrderStatus = true)">
										<u--input v-model="queryForm.Status" disabled disabledColor="#ffffff"
											placeholder="请选择工单状态" border="none">
										</u--input>
										<u-icon slot="right" name="arrow-right"></u-icon>
									</u-form-item>
									<u-form-item label="业务状态" prop="A" borderBottom>
										<u--input v-model="queryForm.A" disabled disabledColor="#ffffff"
											placeholder="请选择业务状态" border="none">
										</u--input>
										<u-icon slot="right" name="arrow-right"></u-icon>
									</u-form-item>
									<u-form-item label="服务状态" prop="RepairType" @click="() => (showAssStatus = true)">
										<u--input v-model="queryForm.AssStatus" disabled disabledColor="#ffffff"
											placeholder="请选择服务状态" border="none">
										</u--input>
										<u-icon slot="right" name="arrow-right"></u-icon>
									</u-form-item>
								</u--form>
							</view>
						</u-collapse-item>
					</u-collapse>
				</view>

				<view class="mr-2 ml-1 line"></view>
				<u-input placeholder="单号/客户/工单信息/设备信息/ID" v-model="queryForm.Kw" clearable border="none">
				</u-input>
				<u-button @click="handleSearch" class="search-btn" :hairline="false" text="查询" size="mini" color="#F65D30">
				</u-button>
			</view>
			<view class=" order-list">
				<u-list @scrolltolower="scrolltolower" height="1080rpx">
					<u-list-item class="mb-3 p-2 item" v-for="(item, idx) in orderList" :key="idx">
						<navigator :url="'OrderView?id=' + item.RepairInfo.ID"
							class="flex justify-between align-center order-headr">
							<view class="flex align-center left">
								<view class="index">
									{{ idx + 1 }}
								</view>
								<view class="title">
									{{ item.RepairInfo.ID }}
								</view>
							</view>
							<view class="right">
								<u--text color="#e0584e" :text="item.RepairInfo.TotalRevenue"></u--text>
							</view>
						</navigator>
						<view class="pt-2 pb-2 mt-2 mb-2 info-list">
							<view class="flex justify-between align-baseline mb-1 info-item">
								<view class="name mr-3">电话</view>
								<view class="flex justify-end align-center f-1" @click="handleInfoClick(item, 'tel')">
									<image class="icon" src="/static/work-order/dh.png" mode="widthFix">
									</image>
									<view class="ml-1 val">
										{{ item.RepairInfo.CustName + item.RepairInfo.Contact + " " + item.RepairInfo.Tel }}
									</view>
								</view>
							</view>
							<view class="flex justify-between align-baseline mb-1 info-item">
								<view class="name mr-3">地址</view>
								<navigator :url="`map?id=${item.RepairInfo.ID}`" class="flex justify-end align-center f-1">
									<image class="icon" src="/static/work-order/ddr.png" mode="widthFix">
									</image>
									<view class="ml-1 val">
										{{ item.RepairInfo.Addr }}
									</view>
								</navigator>
							</view>
							<view class="flex justify-between align-baseline mb-1 info-item">
								<view class="name mr-3">预约时间</view>
								<view class="flex justify-end align-center f-1">
									<view class="ml-1 val">
										{{ item.RepairInfo.AppointmentTime }}
									</view>
								</view>
							</view>
							<view class="flex justify-between align-baseline mb-1 info-item">
								<view class="name mr-3">充电桩</view>
								<view class="flex justify-end align-center f-1">
									<view class="ml-1 val">
										{{ item.RepairInfo.HardItemName + ' ' + item.RepairInfo.HardItemStyle }}
									</view>
								</view>
							</view>
							<view class="flex justify-between align-baseline mb-1 info-item">
								<view class="name mr-3">员工</view>
								<view class="flex justify-end align-center f-1">
									<view class="ml-1 val">
										{{ item.RepairInfo.EngineerName }}
									</view>
								</view>
							</view>
							<view class="flex justify-between align-baseline mb-1 info-item">
								<view class="name mr-3">状态</view>
								<view class="flex justify-end align-center f-1">
									<view class="ml-1 val">
										{{ item.RepairInfo.Status }}
									</view>
								</view>
							</view>
							<view class="flex justify-between align-baseline mb-1 info-item">
								<view class="name mr-3">备注信息</view>
								<view class="flex justify-end align-center f-1">
									<view class="ml-1 val">
										{{ item.RepairInfo.CallDescr }}
									</view>
								</view>
							</view>
							<view>
								<u-album class="mt-1" :urls="formatImgUrl(item.RepairInfo.CallPhotos)"
									@albumWidth="width => albumWidth = width" multipleSize="70" singleSize="70">
								</u-album>

							</view>
						</view>
						<view class="flex justify-end buttons">
							<view v-if="item.Buttons.ShowJxc" class="ml-2">
								<navigator :url="`/pages/sheet/sheet?id=${item.RepairInfo.ID}`">
									<u-button color="#df574d" text="领料" size="small" shape="circle"></u-button>
								</navigator>
							</view>
							<view v-if="item.Buttons.ShowPay" class="ml-2">
								<navigator :url="`OrderPay?id=${item.RepairInfo.ID}`">
									<u-button color="#6e5af1" text="收款" size="small" shape="circle"></u-button>
								</navigator>

							</view>
							<view v-if="item.Buttons.ShowArbitrateAudit" class="ml-2">
								<navigator :url="`ArbitrateAudit?id=${item.RepairInfo.ID}`">
								<u-button color="#6e5af1" text="同意退款" size="small" shape="circle"></u-button>
								</navigator>
							</view>
							<view v-if="item.Buttons.ShowArbitrateAudit" class="ml-2">
								<navigator :url="`ArbitrateEdit?id=${item.RepairInfo.ID}`">
								<u-button color="red" text="拒绝退款" size="small" shape="circle"></u-button>
								</navigator>
							</view>
							<view v-if="item.Buttons.ShowArbitrateView" class="ml-2">
								<u-button color="#5dca81" text="查看退款" size="small" shape="circle"></u-button>
							</view>
							<view v-if="item.Buttons.ShowCancel" class="ml-2">
								<navigator :url="`OrderCancel?id=${item.RepairInfo.ID}`">
									<u-button color="#ef8242" text="消单" size="small" shape="circle"></u-button>
								</navigator>
							</view>
							<view v-if="item.Buttons.ShowAss" class="ml-2">
								<navigator :url="`OrderAss?id=${item.RepairInfo.ID}`">
									<u-button color="#ef8242" text="派单" size="small" shape="circle"></u-button>
								</navigator>
							</view>
							<view v-if="item.Buttons.ShowEdit" class="ml-2">
								<navigator :url="`OrderEdit?id=${item.RepairInfo.ID}`">
									<u-button color="#767a82" text="修改" size="small" shape="circle"></u-button>
								</navigator>
							</view>
							<view v-if="item.Buttons.ShowAudit" class="ml-2">
								<navigator :url="`OrderAudit?id=${item.RepairInfo.ID}`">
									<u-button color="#398ade" text="审核" size="small" shape="circle"></u-button>
								</navigator>
							</view>
							<!-- <view v-if="true" class="ml-2">
								<navigator :url="`/pages/workOrder/repairDone?id=${item.ID}`">
									<u-button color="#5dca81" :text="item.Buttons.RepairDoneText" size="small"
										shape="circle" :customStyle="{ padding: '0 14px' }"></u-button>
								</navigator>
							</view> -->
						</view>
					</u-list-item>
				</u-list>
			</view>
		</view>

		<u-safe-bottom></u-safe-bottom>

		<u-popup :show="showCustomer" mode="center" :round="5">
			<view class="order-popup">
				<view class="popup-title">选择客户</view>
				<u-search bgColor="#eef0f6" color="#9faac0" placeholderColor="#9faac0" placeholder="请输入客户名称"
					:show-action="false" shape="square" searchIcon="" @search="handlePartnerSearch"
					v-model="queryForm.CustName"></u-search>

				<view class="order-radio">
					<u-radio-group v-model="queryForm.CustName" :borderBottom="true" placement="column"
						iconPlacement="right" activeColor="#F65D30" inactiveColor="#fff">
						<u-list @scrolltolower="scrolltoPartnerLower" height="240">
							<u-list-item v-for="(item, index) in partnerList" :key="index">
								<u-radio :customStyle="{ marginBottom: '16px' }" :label="item.PartnerName"
									:name="item.PartnerName">
								</u-radio>
							</u-list-item>
						</u-list>
					</u-radio-group>
				</view>
				<view class="btns">
					<view class="mr-3 f-1">
						<u-button @click="() => (showCustomer = false)" :plain="true" color="#F65D30" shape="circle"
							text="取消"></u-button>
					</view>
					<view class="ml-3 f-1">
						<u-button @click="
							() => {
								queryForm.CustId = '';
								queryForm.CustName = '';
							}
						" :plain="true" color="#F65D30" shape="circle" text="清空"></u-button>
					</view>
				</view>
			</view>
		</u-popup>
		<s-datetime-picker :show="showStartTime" v-model="queryForm.Start" mode="date" title="开始时间"
			@cancel="showStartTime = false"
			@confirm="(e) => { showStartTime = false; handleDateConfirm(e, 'Start') }"></s-datetime-picker>
		<s-datetime-picker :show="showEndTime" v-model="queryForm.End" mode="date" title="结束时间"
			@cancel="showEndTime = false"
			@confirm="(e) => { showEndTime = false; handleDateConfirm(e, 'End') }"></s-datetime-picker>
		<u-popup :show="showSalesman" mode="center" :round="5">
			<view class="order-popup">
				<view class="popup-title">选择员工</view>
				<u-search bgColor="#eef0f6" color="#9faac0" placeholderColor="#9faac0" placeholder="请输入员工名称"
					:show-action="false" shape="square" searchIcon="" @search="handleEmployeeSearch"
					v-model="employeeParams.EmpName"></u-search>

				<view class="order-radio">
					<u-radio-group v-model="queryForm.Engineer" :borderBottom="true" placement="column"
						iconPlacement="right" activeColor="#F65D30" inactiveColor="#fff">
						<u-list @scrolltolower="scrolltoEmployeeLower" height="240">
							<u-list-item v-for="(item, index) in employeeList" :key="index">
								<u-radio :customStyle="{ marginBottom: '16px' }" :label="item.EmpName" :name="item.EmpName">
								</u-radio>
							</u-list-item>
						</u-list>
					</u-radio-group>
				</view>
				<view class="btns">
					<view class="mr-3 f-1">
						<u-button @click="() => (showSalesman = false)" :plain="true" color="#F65D30" shape="circle"
							text="取消"></u-button>
					</view>
					<view class="ml-3 f-1">
						<u-button @click="queryForm.Engineer = ''" :plain="true" color="#F65D30" shape="circle"
							text="清空"></u-button>
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup :show="showRepairType" mode="center" :round="5">
			<view class="order-popup">
				<view class="popup-title">服务类型</view>
				<view class="order-radio">
					<u-radio-group v-model="queryForm.RepairType" :borderBottom="true" placement="column"
						iconPlacement="right" activeColor="#F65D30" inactiveColor="#fff">
						<u-list height="80">
							<u-list-item v-for="(item, index) in repairType" :key="'repairType' + index">
								<u-radio :customStyle="{ marginBottom: '16px' }" :label="item" :name="item">
								</u-radio>
							</u-list-item>
						</u-list>
					</u-radio-group>
				</view>
				<view class="btns">
					<view class="mr-3 f-1">
						<u-button @click="() => (showRepairType = false)" :plain="true" color="#F65D30" shape="circle"
							text="取消"></u-button>
					</view>
					<view class="ml-3 f-1">
						<u-button @click="
							() => {
								queryForm.RepairType = '';
							}
						" :plain="true" color="#F65D30" shape="circle" text="清空"></u-button>
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup :show="showRepairCatg" mode="center" :round="5">
			<view class="order-popup">
				<view class="popup-title">服务分类</view>
				<view class="order-radio">
					<u-radio-group v-model="queryForm.RepairCatg" :borderBottom="true" placement="column"
						iconPlacement="right" activeColor="#F65D30" inactiveColor="#fff">
						<u-list height="80">
							<u-list-item v-for="(item, index) in repairCatg" :key="index">
								<u-radio :customStyle="{ marginBottom: '16px' }" :label="item" :name="item">
								</u-radio>
							</u-list-item>
						</u-list>
					</u-radio-group>
				</view>
				<view class="btns">
					<view class="mr-3 f-1">
						<u-button @click="() => (showRepairCatg = false)" :plain="true" color="#F65D30" shape="circle"
							text="取消"></u-button>
					</view>
					<view class="ml-3 f-1">
						<u-button @click="
							() => {
								queryForm.RepairCatg = '';
							}
						" :plain="true" color="#F65D30" shape="circle" text="清空"></u-button>
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup :show="showOrderStatus" mode="center" :round="5">
			<view class="order-popup">
				<view class="popup-title">工单状态</view>
				<view class="order-radio">
					<u-radio-group v-model="queryForm.Status" :borderBottom="true" placement="column" iconPlacement="right"
						activeColor="#F65D30" inactiveColor="#fff">
						<u-list height="240">
							<u-list-item v-for="(item, index) in statusList" :key="index">
								<u-radio :customStyle="{ marginBottom: '16px' }" :label="item.title" :name="item.title">
								</u-radio>
							</u-list-item>
						</u-list>
					</u-radio-group>
				</view>
				<view class="btns">
					<view class="mr-3 f-1">
						<u-button @click="() => (showOrderStatus = false)" :plain="true" color="#F65D30" shape="circle"
							text="取消"></u-button>
					</view>
					<view class="ml-3 f-1">
						<u-button @click="
							() => {
								queryForm.Status = '';
							}
						" :plain="true" color="#F65D30" shape="circle" text="清空"></u-button>
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup :show="showAssStatus" mode="center" :round="5">
			<view class="order-popup">
				<view class="popup-title">服务状态</view>
				<view class="order-radio">
					<u-radio-group v-model="queryForm.AssStatus" :borderBottom="true" placement="column"
						iconPlacement="right" activeColor="#F65D30" inactiveColor="#fff">
						<u-list height="180">
							<u-list-item v-for="(item, index) in assList" :key="index">
								<u-radio :customStyle="{ marginBottom: '16px' }" :label="item.title" :name="item.title">
								</u-radio>
							</u-list-item>
						</u-list>
					</u-radio-group>
				</view>
				<view class="btns">
					<view class="mr-3 f-1">
						<u-button @click="() => (showAssStatus = false)" :plain="true" color="#F65D30" shape="circle"
							text="取消"></u-button>
					</view>
					<view class="ml-3 f-1">
						<u-button @click="
							() => {
								queryForm.AssStatus = '';
							}
						" :plain="true" color="#F65D30" shape="circle" text="清空"></u-button>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script src="./OrderSearch.js"></script>

<style lang="scss">
.page-container {
	.slot-content {
		width: 100%;
	}

	.page-wrap {
		.serach-bar {
			background-color: #fff;
			border-radius: $s-border-radius;
			color: #333;
			font-size: 28rpx;

			.line {
				height: 40rpx;
				width: 1px;
				margin-left: 30rpx;
				border-right: 1px solid rgba(0, 0, 0, 0.1);
			}

			.query {
				width: 100rpx;

				::v-deep .u-cell__body {
					padding: 0;
				}

				::v-deep .u-collapse-item__content {
					width: calc(100vw - 52px);
				}

				::v-deep .u-collapse-item__content__text {
					padding: 18px 0px 0;
				}
			}

			.search-btn {
				width: 100rpx;
				min-width: 100rpx;
				margin: 0;
				margin-left: 20rpx;
				height: 50rpx;
				border-width: 0 !important;
				border-radius: $s-border-radius;
			}
		}

		.order-list {
			.item {
				background-color: #fff;
				box-shadow: $s-bg-shadow;
				border-radius: $s-border-radius;
				font-size: 28rpx;

				.order-headr {
					.index {
						background-color: $s-manager-color;
						border-radius: 10rpx;
						color: #fff;
						padding: 2rpx 10rpx;
						font-size: 20rpx;
						line-height: 28rpx;
						height: 28rpx;
						margin-right: 20rpx;
					}

					.title {
						color: #333;
						font-size: 32rpx;
					}
				}

				.info-list {
					position: relative;

					.info-item {
						font-size: 24rpx;

						.name {
							color: $s-text-color-label;
						}

						.icon {
							width: 30rpx;
						}
					}

					&:before {
						content: " ";
						position: absolute;
						left: 0;
						top: 0;
						right: 0;
						height: 1px;
						border-top: 1px solid #e5e5e5;
						color: #e5e5e5;
						-webkit-transform-origin: 0 0;
						transform-origin: 0 0;
						-webkit-transform: scaleY(0.5);
						transform: scaleY(0.5);
						z-index: 2; //看情况使用
					}

					&:after {
						content: " ";
						position: absolute;
						left: 0;
						bottom: 0;
						right: 0;
						height: 1px;
						border-top: 1px solid #e5e5e5;
						color: #e5e5e5;
						-webkit-transform-origin: 0 0;
						transform-origin: 0 0;
						-webkit-transform: scaleY(0.5);
						transform: scaleY(0.5);
						z-index: 2; //看情况使用
					}
				}

				.buttons ::v-deep .u-button {
					height: 44rpx;
					padding: 0 10rpx;
					min-width: 88rpx;
				}
			}
		}
	}

	.order-popup {
		width: 600rpx;
		padding: 25rpx 30rpx;

		.popup-title {
			color: #333;
			font-weight: bold;
			font-size: 28rpx;
			margin-bottom: 30rpx;
		}

		::v-deep .uni-input-wrapper {
			.uni-input-input {
				text-align: left;
			}

			.input-placeholder {
				text-align: left;
				color: #808080;
			}
		}

		.popup-tip {
			margin-top: 20rpx;
			color: #555;
			font-size: 22rpx;
		}

		.btns {
			display: flex;
			justify-content: center;
			width: 100%;
			padding: 20rpx 0;
			margin-top: 30rpx;
			background-color: #fff;

			::v-deep .u-button {
				margin: 0;
			}
		}

		.order-radio {
			padding: 20rpx;
			margin-top: 30rpx;
			// ::v-deep .uicon-checkbox-mark{
			// 	color:#F65D30 !important;
			// }
		}
	}
}
</style>
